---
title: Gridsomeからの移行
description: GridsomeプロジェクトをAstroに移行するためのガイド
sidebar:
  label: Gridsome
type: migration
stub: true
framework: Gridsome
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Gridsome](https://gridsome.org)は、VueとGraphQLをベースにしたオープンソースの静的サイトジェネレーターです。

## GridsomeとAstroの類似点

GridsomeとAstroには、プロジェクト移行を容易にするいくつかの共通点があります。

- GridsomeとAstroはどちらもモダンなJavaScript静的サイトジェネレーターで、[プロジェクト構成](/ja/basics/project-structure/#ディレクトリとファイル)が似ています。
- 両者とも`src/`ディレクトリと[ファイルベースルーティングを行う`src/pages/`](/ja/basics/astro-pages/)を使用します。
- Astroには[Vueコンポーネントを利用する公式インテグレーション](/ja/guides/integrations-guide/vue/)があり、Vue用のNPMパッケージも利用できます。GridsomeのVueコンポーネントや依存関係をそのまま流用できる場合があります。
- GridsomeとAstroどちらも、[ヘッドレスCMS、API、Markdownファイルからデータを取得](/ja/guides/data-fetching/)できます。既存のコンテンツ執筆フローを維持しやすいです。

## GridsomeとAstroの主な相違点

GridsomeサイトをAstroで再構築する際には、次のような違いに気付くでしょう。

- GridsomeはVueベースのシングルページアプリ(SPA)ですが、Astroは[`.astro`コンポーネント](/ja/basics/astro-components/)を使ったマルチページアプリ(MPA)です。AstroではVueの他、React、Svelte、Solidなども併用可能です。
- GridsomeはSPAとして`vue-router`と`vue-meta`を使ってルーティングや`<head>`の管理を行いますが、Astroでは個別HTMLページと[レイアウトコンポーネント](/ja/basics/layouts/)内で`<head>`を直接管理します。
- [ローカルファイルのデータ取得](/ja/guides/imports/): GridsomeはGraphQLでファイルをクエリしますが、AstroではESMインポートと[`import.meta.glob()`](/ja/guides/imports/#glob-patterns)を使用します。GraphQLを使いたい場合は手動で追加できますが、標準では含まれません。

## GridsomeサイトをAstroに変換する

GridsomeブログをAstroへ移行するには、公式ブログテーマスターターを使うか、[テーマショーケース](https://astro.build/themes/)でコミュニティ製ブログテーマを探してください。

`create astro`コマンドに`--template`を渡すと、公式スターターで新しいAstroプロジェクトを作成できます。また、[GitHub上の既存Astroリポジトリから新規プロジェクトを開始](/ja/install-and-setup/)することも可能です。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm create astro@latest -- --template blog
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm create astro@latest --template blog
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create astro --template blog
  ```
  </Fragment>
</PackageManagerTabs>

既存のMarkdown（またはMDXファイルはオプションのインテグレーションを使って）ファイルは、Astroのコンテンツとして[MarkdownまたはMDXページを作成できます](/ja/guides/markdown-content/)。

Gridsomeのプロジェクト構成はAstroに似ているため、いくつかのファイルは新しいAstroプロジェクトにそのままコピーできるかもしれません。ただし完全には一致しないため、[Astroのプロジェクト構成](/ja/basics/project-structure/)を事前に確認するのがおすすめです。

また、Gridsomeとは異なり、Astroではファイルの読み込みに[`import.meta.glob()`](/ja/guides/imports/#glob-patterns)を使用するため、ローカルファイルの操作方法も併せて確認してください。

ポートフォリオサイトやドキュメントサイトなど別タイプのサイトに移行したい場合は、[astro.new](https://astro.new)で他の公式スターターテンプレートを確認してください。GitHubリポジトリへのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodで開くためのワンクリックリンクが用意されています。

## コミュニティリソース

<CardGrid>
  <LinkCard title="Migration from Gridsome to Astro" href="https://fyodor.io/migration-from-gridsome-to-astro/" />
  <LinkCard title="Hello Astro!" href="https://thamas.hu/astro-hello" />
</CardGrid>

:::note[共有したいリソースがありますか？]
GridsomeサイトのAstroへの変換について参考になる動画や記事があれば、このリストに[追加してください](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx)！
:::
